<template>
	<view class="content">
		 <view class="searchTop mb20">
		 	<u-search placeholder="请输入花型编号或分类词" v-model="state.params.name" @search="toSearch" @custom="toSearch" @clear="toClear"></u-search>
		 </view>
		 <goodsList :data="state.goods"></goodsList>
		 <safeBottom></safeBottom>
	</view>
</template>

<script setup>
import { reactive } from "vue";
import { onReachBottom } from '@dcloudio/uni-app'
import request from '@/utils/request.js'
	const state = reactive({
		goods: [],
		isEnd: false,
		loading: false,
		params: {
			page: 0,
			count: 20,
			name:'',
			categoryId: 0
		},
	})
	const toClear = () => {
		state.params.name = ''
		uni.pageScrollTo({
			scrollTop: 0
		})
		toSearch()
	}
	const toSearch = () => {
		state.params.page = 0;
		state.isEnd = false
		getGoods()
	}
	const getGoods = () => {
		state.loading = true;
		request({
			url:'api/goods/goodsList',
			data: state.params,
			needLogin: true,
		}).then(res => {
			if(state.params.page === 0) {
				state.goods = res;
			}else {
				state.goods = [...state.goods,...res]
			}
			state.isEnd = res.length < state.params.count;
			if(!state.isEnd) state.params.page++;
			state.loading = false;
		}).catch(err => {
			state.loading = false;
		})
	}
	getGoods()
	onReachBottom(() => {
		if(state.isEnd || state.loading) return;
		getGoods()
	})
</script>

<style lang="scss" scoped>
.content {
	padding: 0 30rpx 30rpx;
	.searchTop {
		$h: 100rpx;
		height: $h;
		position: sticky;
		top: 0;
		display: flex;
		align-items: center;
		z-index: 10;
		background-color: #fff;
	}
}
</style>
